<template>
  <div>
    <portal-header :course="courseName"></portal-header>

    <div class="container">
      <portal-navigation></portal-navigation>
      <div class="line">
        <el-row class="tac">
          <el-col :span="6">
            <h3 class="listHeader">课程介绍</h3>
            <el-menu
              :default-active="active"
              class="el-menu"
              mode="horizontal"
              @click="handleSelect"
              background-color="#C52626"
              text-color="#fff"
              active-text-color="#ffd04b"
              data="allColumns" >

              <!--v-for="(columnName, columnId) in allColumn"-->

              <el-menu-item index="1" @click="displayCourseIntroduction()"><span slot="title">课程简介</span></el-menu-item>
              <el-menu-item index="2"><span slot="title">教学方法</span></el-menu-item>
              <el-menu-item index="3"><span slot="title">课程大纲</span></el-menu-item>
              <el-menu-item index="4"><span slot="title">课程安排</span></el-menu-item>
              <el-menu-item index="5"><span slot="title">课程理念与目标</span></el-menu-item>
              <el-menu-item index="6"><span slot="title">课程动态</span></el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </div>

      <div v-if="active=1" class="courseIntroduction">
        <span>课程简介</span>
        <hr/>
        <div class="contintrocuctionContentent">

        </div>
      </div>

      <div v-if="active=2" class="teachingMethod">
        <span>教学方法</span>
        <hr/>
        <div class="teachingMethodContentent">

        </div>
      </div>
    </div>
    <portal-footer></portal-footer>
  </div>
</template>
<script>
  import PortalFooter from "../../components/coursePortal/PortalFooter";
  import PortalNavigation from "../../components/coursePortal/PortalNavigation";
  import PortalList from "../../components/coursePortal/PortalList";
  import PortalHeader from "../../components/coursePortal/PortalHeader";
  import {CourseIntroductionService} from "./CourseIntroductionService";

  export default {
    name: "CourseIntroduction",
    components: {PortalHeader, PortalList, PortalNavigation, PortalFooter},
    data(){
      return{
        introcuctionContent:[],
        active:"2",
        allColumns:[],
        columnName:'',
        courseName:'',
        courseId:this.$route.params.courseId         //接收路由传入的courseId
      }
    },
    created: function () {
      this.findCurrentCourse();
      this.findAllColumns();
      this.active=1;
    },
    methods:{

      /*当前课程名*/
      findCurrentCourse(courseId){
        CourseIntroductionService.findCurrentCourse(courseId).then(res =>{
          console.log(courseId);
          this.currentCourse = res.data;
        })
      },

      /*当前课程介绍*/
      findCurrentIntrocuction(courseId){
        CourseIntroductionService.findCurrentIntrocuction(courseId).then(res=>{
          this.introcuctionContent = res.data;
        })/*.catch(() => {
            this.$message({
              type: 'error',
              message: '查询失败，请稍后再试！'
            })
          })*/
      },

      /*查找所有栏目*/
      findAllColumns(){
        CourseIntroductionService.findAllColumns().then(res =>{
          console.log(this.allColumns)
          this.allColumns = res.data;
        })/*.catch(() => {
            this.$message({
              type:'error',
              message:'查询失败，请稍后再试！'
            })
          })*/
      },
      handleSelect(key,keyPath){
        //TODO  課程介紹内容跳轉
          console.log(key, keyPath);
      }
    },

  }
</script>

<style scoped>
  .listHeader{
    height: 40px;
    width:200px;
    background: -webkit-linear-gradient(#F45F5F, #D85154); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#F45F5F, #D85154); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#F45F5F, #D85154); /* Firefox 3.6 - 15 */
    background: linear-gradient(#F45F5F, #D85154); /* 标准的语法（必须放在最后） */
    text-align: center;
    color: #ffffff;
    padding-top: 10px;
  }
  .container{
    width:70%;
    height:600px;
    background-color: aliceblue;
    margin:0 auto;
  }

  /deep/.portal-header .search{
    padding-top: 60px;

  }

  .courseIntroduction{
    float: left;
    width:500px;
    margin-left: 80px;
    padding-top: 18px;
    font-family:solid red;

  }

  .el-menu{
    text-align: center;
  }
  .el-menu el-menu-item{
    text-align: center;
  }
  /deep/ .line .el-menu-item{
    width:200px;
  }
  .line{
    float: left;
  }

</style>
